import { observer } from 'mobx-react-lite'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import type { FormProps } from 'antd'
import { Button, Form, Input } from 'antd'
import { authStore } from '@renderer/store/user'
import styles from './index.module.less'

type FieldType = {
  username?: string
  password?: string
  remember?: string
}
const Register: React.FC = observer(() => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const navigate = useNavigate()

  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    console.log('Success:', values)
    await authStore.login(username, password)
    if (authStore.isAuthenticated) {
      navigate('/')
    }
  }

  return (
    <div className={styles.login}>
      <div className={styles.centerBox}>
        <div className={styles.title}>注 册</div>
        <Form
          name="ruleForm"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          style={{ minWidth: '100%' }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" block loading={authStore.loading} htmlType="submit">
              注 册
            </Button>
          </Form.Item>
        </Form>
        <p className={styles.link}>
          <span>已有账号?</span>
          <Button type="link" onClick={() => navigate('/login')}>
            去登录
          </Button>
        </p>
      </div>
    </div>
  )
})

export default Register
